<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">开启一个倒计时定时器 </button>
    <button class="btn2">停止一个倒计时定时器</button>
    <script>
        // 1.倒计时定时器 setTimeout： 倒计时一段时候之后执行代码；
        // document.onclick = function () {
        //     var res = setTimeout(function () {
        //         console.log("倒计时2秒之后执行函数里的代码")
        //     }, 2000);  // 单位是毫秒
        //     console.log(res); // 返还值是一个数字 类似id

        //     var res2 = setTimeout(function () {
        //         console.log("倒计时2秒之后执行函数里的代码")
        //     }, 2000);  // 单位是毫秒
        //     console.log(res2); // 返还值是一个数字 类似id
        // }

        // 停止定时器  ：clearTimeout
        // var btn1 = document.querySelector(".btn1");
        // var btn2 = document.querySelector(".btn2");
        // var timer1,timer2;

        // btn1.onclick = function () {
        //     console.log("开启一个定时器")
        //      timer1 = setTimeout(function () {
        //         console.log("定时器111")
        //     }, 3000);
        //      timer2 = setTimeout(function () {
        //         console.log("定时器222")
        //     }, 3000);

        // }

        // btn2.onclick = function () {
        //     console.log("停止定时器")
        //     clearTimeout(timer2);
        // }


        // 2.间隔定时器 ： 间隔一段时间 不停的执行代码 ；
        // 开启一个定时器 
        // var num = 0;
        // var res =  setInterval(function(){
        //     num++;
        //     console.log("setInterval"+num);
        // }, 1000);
        // console.log(res);


        // 停止间隔定时器;
        // var res = setInterval(function () {
        //     console.log(111);
        // }, 1000);
        // document.onclick = function () {
        //     console.log("停止间隔定时器");
        //     clearInterval(res);
        // }



        // 3.定时器里的注意点 ；
        // 第一 ： 清除定时器方法可以混用 
        // var timer =  setInterval(function(){
        //     console.log("执行了");
        // }, 1000);
        // document.onclick = function(){
        //     clearTimeout(timer);
        // }

        // 第二个 ： 利用settimeout 模拟 setinterval

        // function fn(){
        //     setTimeout(function(){
        //         console.log("执行了");
        //         fn();
        //     }, 1000);
        // }
        // fn();

        // 第三个 ： 定时器的执行顺序 
        // 同步和异步任务；
        // setTimeout(() => {
        //     console.log(111);
        // }, 0);
        // console.log(2222);

        // 第四个： 定时器里的this 指向 window
        // document.onclick = function(){
        //     console.log(this);  // 事件源 
        //     setTimeout(function(){
        //         console.log(this);  // this是window
        //     }, 1000);
        // }


        // 1.写一下  2. 方块从左移动到最右边 使用定时器实现； 










    </script>
</body>

</html>